<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/index.css" />
</head>

<body>
	<div id="houseslist">
		<h2>房屋列表</h2>

		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="房屋标题">
				<el-input v-model="title" placeholder="标题" clearable></el-input>
			</el-form-item>
			<el-form-item label="房屋朝向">
				<el-select v-model="orientId" placeholder="请选择朝向" clearable>
					<el-option :label="orient.orientName" :value="orient.orientId" v-for="orient in orientList">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="房屋类型">
				<el-select v-model="typeId" placeholder="请选择类型" clearable>
					<el-option :label="type.typeName" :value="type.typeId" v-for="type in typeList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="房屋状态">
				<el-select v-model="houseState" placeholder="状态" clearable>
					<el-option label="在售" value="0"></el-option>
					<el-option label="已售" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getHouseList" icon="el-icon-search">查询</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="housesList" style="width: 100%" stripe border>
			<el-table-column type="index" label="序号" style="width:25%">
			</el-table-column>
			<el-table-column prop="houseId" label="房屋编号" width="80" v-if="false">
			</el-table-column>

			<el-table-column prop="hpic" label="图片" width="100">
				<template slot-scope="scope">
					<el-avatar shape="square" :size="80" :src="`${fileurl}${scope.row.pic}`"></el-avatar>
				</template>
			</el-table-column>

			<el-table-column prop="title" label="房屋标题" width="250">
			</el-table-column>
			<el-table-column prop="areas" label="房屋面积">
			</el-table-column>
			<el-table-column prop="price" label="房屋价格">
			</el-table-column>
			<el-table-column prop="info" label="房屋说明" width="250">
			</el-table-column>
			<el-table-column prop="houseState" label="房屋状态" :formatter="formatState">
			</el-table-column>
			<el-table-column prop="createTime" label="发布时间" width="160">
			</el-table-column>
			<el-table-column prop="housesType.typeName" label="房屋类型" width="120">
			</el-table-column>
			<el-table-column prop="housesOrient.orientName" label="房屋朝向" width="110">
			</el-table-column>
			<el-table-column prop="admins.adminsName" label="发布者">
			</el-table-column>
			<el-table-column label="操作" width="160">
				<template slot-scope="scope">
					<el-button size="mini" @click="preUpdate(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteById(scope.$index, scope.row)">删除</el-button>

				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="[2,5,10,20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog title="修改房屋信息" :visible.sync="dialogVisible" width="500">
			<el-form ref="updateform" :model="housesObj" label-width="100px" style="width:500px">

				<el-form-item label="房屋编号">
					<el-input v-model="housesObj.houseId" :disabled="true"></el-input>
				</el-form-item>

				<el-form-item label="房屋标题" :required="true">
					<el-input v-model="housesObj.title"></el-input>
				</el-form-item>

				<el-form-item label="房屋价格">
					<el-input v-model="housesObj.price"></el-input>
				</el-form-item>

				<el-form-item label="房屋面积">
					<el-input v-model="housesObj.areas"></el-input>
				</el-form-item>

				<el-form-item label="房屋说明">
					<el-input v-model="housesObj.info"></el-input>
				</el-form-item>

				<el-form-item label="房屋图片" :required="true">
					<!-- <el-input v-model="housesObj.pic"></el-input> -->
					<input type="file" @change="setFengmian" id="fname" name="fengmian" />
				</el-form-item>

				<el-form-item label="房屋朝向" :required="true">
					<el-select v-model="housesObj.housesOrient.orientId" placeholder="请选择朝向">
						<el-option :label="orient.orientName" :value="orient.orientId" v-for="orient in orientList">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="房屋类型" :required="true">
					<el-select v-model="housesObj.housesType.typeId" placeholder="请选择类型">
						<el-option :label="type.typeName" :value="type.typeId" v-for="type in typeList"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房屋发布者" :required="true">
					<el-select v-model="housesObj.admins.adminsId" placeholder="请选择发布者">
						<el-option :label="admins.adminsName" :value="admins.adminsId" v-for="admins in adminsList">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房屋状态" :required="true">
					<el-select v-model="housesObj.houseState" placeholder="状态">
						<el-option label="在售" value="0"></el-option>
						<el-option label="已售" value="1"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="update">修改</el-button>

				</el-form-item>

			</el-form>

		</el-dialog>

	</div>

	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>

	<script type="text/javascript" src="js/common.js"></script>


	<script type="text/javascript">
		let v = new Vue({
			el: "#houseslist",
			data: {
				housesList: [],
				currentPage: 1, //当前页码
				size: 2, //每页显示的条数
				total: -1, //总记录数
				adminsName: "",
				adminsState: "",
				dialogVisible: false,//控制 el-dialog是否显示
				orientList: [],
				typeList: [],
				adminsList: [],
				title: "", //四个条件搜索
				houseState: "",
				orientId: "",
				typeId: "",
				hpic: "", //图片
				fileurl: "/housesfiles/",
				housesObj: {
					houseId: "",
					title: "",
					price: "",
					areas: "",
					info: "",
					pic: "",
					houseState: "",
					housesOrient: {
						orientId: "",

					},
					housesType: {
						typeId: ""
					},
					admins: { // h5 web存储  登录成功后用户信息存到h5web存储中  直接获取
						adminsId: "",

					}

				}

			},
			created() {
				this.getHouseList();
				this.getOrientList();
				this.getTypeList();
				this.getAdminsList();
			},
			methods: {
				getOrientList: function () { //获取朝向列表
					let that = this;
					axios.get("/housesOrient/selectAll").then(function (r) {
						if (r.data.state == "success") {
							that.orientList = r.data.housesorientlist;

						}

					});
				},
				getTypeList: function () { //获取类型列表
					let that = this;
					axios.get("/housesType/selectAll").then(function (r) {
						if (r.data.state == "success") {
							that.typeList = r.data.housestypelist;
						}

					});
				},
				getAdminsList: function () {
					let that = this;
					axios.get("/admins/selectAll").then(function (r) {
						if (r.data.state == "success") {
							that.adminsList = r.data.adminslist;
						}

					});
				},
				getHouseList: function () {
					let that = this;
					let str = "curPage=" + this.currentPage + "&size=" + this.size + "&title=" + this.title + "&typeId=" + this.typeId + "&orientId=" + this.orientId + "&houseState=" + that.houseState;
					axios.post("/houses/selectAllByTitleTypeOrientStateByPageInfo", str).then(function (r) {
						if (r.data.state == "success") {
							that.housesList = r.data.houseslist;
							that.total = r.data.total;


						}
					});
				},

				formatState: function (row) { //格式化houseState列   参数row--jsonObject
					if (row.houseState == 0) {
						return "在售";
					} else if (row.houseState == 1) {
						return "已售";
					}
					return "无";

				},
				handleSizeChange: function (val) { //val--size   size改变时
					this.size = val;
					this.getHouseList();
				},
				handleCurrentChange: function (val) { //val--currentPage  当前页码改变时
					this.currentPage = val;
					this.getHouseList();
				},
				deleteById: function (index, row) {//index 索引位置  row当前的jsonObject对象

					//js confirm 
					let aid = row.houseId;
					let that = this;
					axios.get("/houses/delete?houseId=" + aid).then(function (r) {
						if (r.data.state == "success") {
							that.$message.success("删除成功！");
							//当前页面 数据  删
							//删除这个索引位置的元素
							// splice js中的数组函数  参数1 索引位置  参数2 删除数量
							that.housesList.splice(index, 1);
						}
					}).catch(function (error) {
						that.$message.error("删除失败！");
					});

				},
				preUpdate: function (index, row) {//准备修改
					this.dialogVisible = true;
					//表单元素设置默认值
					this.housesObj = this.housesList[index];
					this.housesObj.houseState = this.housesObj.houseState + ""; console.log(this.housesObj);

				},
				update: function () {
					let that = this;
					let fm = new FormData();
					if (this.housesObj.title == "") {
						this.$message.error("请输入标题！")
					}
					else if (this.hpic == "") {
						this.$message.error("请上传图片！")
					}
					else if (this.housesObj.housesOrient.orientId == "") {
						this.$message.error("请选择朝向！")
					}
					else if (this.housesObj.housesType.typeId == "") {
						this.$message.error("请选择类型！")
					}
					else if (this.housesObj.admins.adminsId == "") {
						this.$message.error("请选择发布者！")
					}
					else if (this.housesObj.houseState == "") {
						this.$message.error("请选择房屋状态！")
					}
					else {
						fm.append("houseId", this.housesObj.houseId);
						fm.append("title", this.housesObj.title);
						fm.append("price", this.housesObj.price);
						fm.append("areas", this.housesObj.areas);
						fm.append("info", this.housesObj.info);

						fm.append("housePic", this.hpic);
						fm.append("admins.adminsId", this.housesObj.admins.adminsId);

						fm.append("housesOrient.orientId", this.housesObj.housesOrient.orientId);
						fm.append("housesType.typeId", this.housesObj.housesType.typeId);

						fm.append("houseState", that.housesObj.houseState);

						axios.post("/houses/update", fm, {
							headers: {
								'content-type': 'multipart/form-data'
							}
						}).then(function (r) {


							//关闭修改对话框

							that.dialogVisible = false;
							//location.href='housesList.html';

						});
					}

				},
				setFengmian: function (event) { //文件域内容改变时触发--用户一旦上传了图片 将图片赋值给hpic变量
					this.hpic = event.target.files[0];
				}
			}
		});
	</script>
</body>

</html>